<template>
    <div id="userCardListByTag">
        <van-card v-for="user in userList" :desc="user.profile" :title="`${user.username}`" :thumb="user.avatarUrl"
            :tag="title" @click="checkInfo(user)">
            <template #tags>
                <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">
                    {{ tag }}
                </van-tag>
            </template>
            <template #footer>
                <van-button size="mini" @click.stop="HandleClick(user, action)">{{ action }}</van-button>
            </template>
        </van-card>
    </div>
</template>

<script setup lang="ts">
import { UserType } from "../models/user";
import { useRouter } from 'vue-router'
interface UserCardListProps {
    userList: UserType[],
    title: string,
    action: string,
}
const router = useRouter();
withDefaults(defineProps<UserCardListProps>(), {
})
const HandleClick = (user: UserType, action: string) => {
    if (action === '查看信息') {
        router.push({
            path: '/user/intro',
            query: {
                id: user.id
            }
        })
    } else {
        router.push({
            path: '/chat',
            query: {
                chatUserId: user.id,
                userName: user.username
            }
        })
    }
    
}

const checkInfo = (user: UserType) => {
    router.push({
        path: '/user/intro',
        query: {
            id: user.id
        }
    })
}
</script>

<style scoped></style>